<template>
  <!-- 常用功能 -->
  <el-card class="mt">
    <template #header>
      <div class="card-header">
        <h1>常用功能</h1>
      </div>
    </template>

    <div class="quick mt mb">
      <el-row>
        <el-col
          :span="4"
          v-for="(item, index) in blocks"
          :key="index"
          @click="navigate(item.name, item.path)"
        >
          <img :src="item.icon" />
          <p>{{ item.name }}</p>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getBlocks } from "@/api/status";
import type { BlockItem } from "@/api/status";

/**
 * 功能作用:常用区块的数据渲染和跳转
 * 功能描述:
 * 引入 vue-router ,声明实例,拿到里面的属性和方法
 * 引入 pinia 文件 - tabs.ts ,拿到 useTabsStore 快捷页签实例,声明实例,拿到里面的属性和方法
 * 拿到 tabsStore 实例 里的 addTab 函数, 用于添加新的标签页
 * 拿到 tabsStore 实例 里的 setCurrentTab 函数, 用于设置当前激活的标签页
 * 声明一个响应式变量 blocks ,用于存储区块数据
 * 在页面加载时,调用接口获取数据,如果请求成功,将数据赋值给响应式变量,用于页面v-for循环渲染
 * 创建 navigate 函数,用于跳转到对应的路由,并添加快捷标签页, 函数的参数为 name(快捷页签名称) 和 url(路径)
 * 调用路由实例的 push 方法,传入 url 作为参数,用于跳转到对应的路由
 * 调用 tabsStore 实例的 addTab 函数,传入 name, url, "" 作为参数,用于添加当前路由对应的标签页
 * 调用 tabsStore 实例的 setCurrentTab 函数,传入 name, url 作为参数,用于设置当前高亮的标签页
 */
import { useRouter } from "vue-router";
const router = useRouter();
import { useTabsStore } from "@/store/tabs";
const tabsStore = useTabsStore();
const { setCurrentTab, addTab } = tabsStore;
const blocks = ref<BlockItem[]>([]);
onMounted(async () => {
  const res = await getBlocks();
  if (res.code === 200) {
    blocks.value = res.data || [];
  }
});
const navigate = (name: any, url: any) => {
  router.push(url);
  addTab(name, url, "");
  setCurrentTab(name, url);
};
</script>

<style lang="less" scoped>
// 常用功能
.quick {
  margin-top: 30px;
  text-align: center;
  cursor: pointer;
  .el-row {
    .el-col {
      transition: all 0.3s;
      &:hover {
        transform: translateY(-5px);
      }
    }
  }
  p {
    margin-top: 10px;
    color: #333;
  }
}
</style>
